<template>
  <div class="index" ref="scrollbox">
    <div class="container" id="scrollbox">
      <div class="bannerbox clmstart">
        <div class="navbox">
          <div class="navcontbox">
            <div class="navcont">
              <div class="logobox">
                <img src="../assets/img/logo.png" class="logo" alt="logo" />
                <div class="bebe">
                  <p class="zn">在一起<span>更强大</span></p>
                  <p>Be Together</p>
                  <p>Become <span class="bold">Greater</span></p>
                </div>
              </div>
              <div class="tabwrap">
                <nav>
                  <router-link tag="li" to="/index/summary">
                    <div class="tablink">Summary</div>
                  </router-link>
                  <li>
                    <div class="tablink" @click="tobot">Agenda</div>
                  </li>
                  <li>
                    <div class="tablink" @click="toPay">Payment</div>
                  </li>
                  <router-link tag="li" to="/index/faqs">
                    <div class="tablink">FAQs</div>
                  </router-link>
                </nav>
              </div>
            </div>
          </div>
          <div class="navcontbox_small">
            <div class="order" @click.capture="smallnav = true">
              <i class="el-icon-minus"></i>
              <i class="el-icon-minus"></i>
              <i class="el-icon-minus"></i>
            </div>
          </div>
        </div>
        <div class="banner">
          <div class="top">
            <img src="../assets/img/logo2.png" class="logo2" />
            <p class="p1">2023 <span>GREATER</span> CHINA HUMAN RESOURCES CONFERENCE</p>
            <p class="p2">Be connected. Be courageous. Be the future.</p>
          </div>
          <div class="bot">
            <p class="p3">NOVEMBER 27-30, 2023</p>
            <p class="p3">THE RITZ-CARLTON & RENAISSANCE HAIKOU</p>
            <button
              type="button"
              class="toregbtn"
              @click="$router.push('/reg')"
            >
              Register Now
            </button>
            <p
              class="already"
              @click="
                $router.push({ path: '/reg', query: { from: 'already' } })
              "
            >
              Already registered?
            </p>
          </div>
        </div>
      </div>
      <!-- nav small -->
      <div class="nav_small" v-show="smallnav">
        <i class="el-icon-close closenav" @click="smallnav = false"></i>
        <ul>
          <router-link tag="li" to="/index/summary" @click.native="changeNav">
            <div class="tablink">Summary</div>
          </router-link>
          <li @click="tobot">
            <div class="tablink">Agenda</div>
          </li>
          <li @click="toPay">
            <div class="tablink">Payment</div>
          </li>
          <router-link tag="li" to="/index/faqs" @click.native="changeNav">
            <div class="tablink">FAQs</div>
          </router-link>
        </ul>
      </div>
      <!-- 主体 -->
      <div class="main">
        <router-view></router-view>
      </div>
      <!--  -->
      <Footer />
    </div>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
export default {
  data() {
    return {
      // navlist: [
      //   { id: "nav1", name: "Summary", url: "/index/summary" },
      //   { id: "nav2", name: "Agenda", url: "/index/summary" },
      //   { id: "nav3", name: "FAQs", url: "/index/faqs" },
      // ],
      smallnav: false,
    };
  },
  methods: {
    //导航栏切换
    changeNav() {
      if (this.smallnav) {
        this.smallnav = false;
      }
    },
    //
    tobot() {
      if (this.$route.path !== "/index/summary") {
        return;
      }
      if (this.smallnav) {
        this.smallnav = false;
      }
      let element = document.getElementById("scrollbox");
      element.scrollIntoView({ behavior: "smooth", block: "end" });
    },
    toPay() {
      if (this.smallnav) {
        this.smallnav = false;
      }
      this.$router.push({ path: "/reg", query: { from: "topay" } });
    },
  },
  components: {
    Footer,
  },
};
</script>

<style lang="less" scoped>
.index {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .container {
    position: relative;
    width: 100%;
    height: auto;
    .bannerbox {
      width: 100%;
      background: url("../assets/img/banner.jpg") no-repeat;
      background-size: cover;
      .navbox {
        position: relative;
        width: 100%;
        padding: 3rem 0 0.625rem;
        text-align: right;
        .navcontbox {
          max-width: 1200px;
          margin: auto;
          .navcont {
            max-width: 100%;
            padding: 0.9375rem 0 1rem;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            .logobox {
              display: flex;
              .logo {
                max-width: 170px;
                display: inline-block;
                vertical-align: bottom;
                margin-left: -1rem;
                object-fit: contain;
              }
              .bebe {
                border-left: 1px solid #fff;
                box-sizing: border-box;
                text-align: left;
                padding-left: 2rem;
                margin-left: 2rem;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: flex-start;
                p {
                  font-family: "RidleyLight";
                  font-size: 1.2rem;
                  line-height: 1.4;
                  color: #ffffff;
                }
                .bold {
                  font-family: "RidleyBold";
                }
                .zn{
                  font-family: "SourceHanSansCN-Regular";
                  span{
                    font-family: "SourceHanSansCN-Bold";
                    padding-left: 0.5rem;
                  }
                }
              }
            }
            .tabwrap {
              flex: 1;
              line-height: 0;
              text-align: right;
              display: flex;
              justify-content: flex-end;
              nav {
                flex: 1;
                display: inline-block;
                list-style-type: none;
                margin: 0;
                li {
                  width: 9rem;
                  display: inline-block;
                  white-space: nowrap;
                  cursor: pointer;
                  text-align: center;
                  border-left: 1px solid #ffffff;
                  border-right: 1px solid #ffffff;
                  box-sizing: border-box;
                  .tablink {
                    display: inline-block;
                    position: relative;
                    font-family: "RidleyLight", Arial, Helvetica, sans-serif;
                    font-weight: 400;
                    font-size: 1.2rem;
                    color: #ffffff;
                    line-height: 1.3;
                    text-align: left;
                    background-color: transparent;
                    border: 0;
                    border-color: rgb(255, 255, 255);
                    border-style: none;
                    padding: 0px 0px 5px;
                  }
                }
                li:first-child {
                  padding-left: 0;
                  border-left-width: 2px;
                }
                li:last-child {
                  border-right-width: 2px;
                }
                li.active .tablink {
                  // border-bottom: 2px solid #ff9662;
                  font-weight: 700;
                  font-family: "RidleyBold";
                  color: #f18f61;
                }
              }
            }
          }
        }
      }
      // 头图
      .banner {
        position: relative;
        max-width: 1200px;
        margin: auto;
        background: url("../assets/img/ban.jpg") no-repeat center center;
        background-size: cover;
        text-align: center;
        .logo2 {
          width: 13%;
          padding-top: 3rem;
        }
        .top {
          p {
            color: #000000;
            span {
              font-family: "RidleyBold";
            }
          }
          .p1 {
            font-size: 2.6rem;
            padding-top: 1.5rem;
            line-height: 1.3;
          }
          .p2 {
            font-family: "RidleyBold";
            font-size: 1.7rem;
            padding-top: 0.5rem;
          }
        }
        .bot {
          margin-top: 10rem;
          .p3 {
            font-size: 1.7rem;
            color: #ffffff;
            line-height: 1.1;
          }
          .toregbtn {
            margin: 1.2rem 0 0.2rem;
          }
          .already {
            padding-bottom: 1.5rem;
          }
        }
      }
    }
    .main {
      width: 100%;
      height: auto;
      text-align: center;
    }
  }
}
@media only screen and (max-width: 600px) {
  .index {
    .container {
      .bannerbox {
        .navbox {
          .navcontbox {
            .navcont {
              .logobox {
                .logo {
                  max-width: 100px;
                }
                .bebe {
                  padding-left: 0.5rem;
                  margin-left: 0.5rem;
                  p {
                    font-size: 1rem;
                    padding-bottom: 0.5rem;
                    line-height: 1;
                  }
                  p:last-child {padding-bottom: 0;}
                }
              }
            }
          }
        }
        .banner {
          .top {
            .logo2 {
              width: 30%;
            }
            .p1 {
              font-size: 1.2rem;
              padding: 1rem 2.8rem 0;
            }
            .p2 {
              font-size: 0.9rem;
              padding: 1rem 2rem 0;
            }
          }
          .bot {
            margin-top: 5rem;
            .p3 {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1000px) {
  .index {
    .container {
      .bannerbox {
        .navbox {
          padding-top: 5rem;
          .navcontbox {
            padding-top: 2rem;
            .navcont {
              justify-content: center;
              .tabwrap {
                display: none;
              }
            }
          }
          .navcontbox_small {
            position: absolute;
            top: 2rem;
            left: 2rem;
            .order {
              i {
                display: block;
                font-size: 2.2rem;
                line-height: 0.6rem;
                font-weight: bolder;
                color: #ffffff;
              }
            }
          }
        }
      }
      .nav_small {
        position: fixed;
        top: 0;
        left: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        .closenav {
          position: absolute;
          right: 1rem;
          top: 1rem;
          font-size: 2.2rem;
        }
        ul {
          padding: 2rem;
          li {
            padding: 1rem;
          }
          li.active {
            font-weight: 700;
            font-family: "RidleyBold";
            color: #f18f61;
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 1001px) {
  .index {
    .container {
      .bannerbox {
        .navbox {
          .navcontbox_small {
            display: none;
          }
        }
      }
      .nav_small {
        display: none;
      }
    }
  }
}
@media only screen and (max-width: 1345px) {
  .index {
    .container {
      .bannerbox {
        .navbox {
          .navcontbox {
            .navcont {
              .logobox {
                .logo {
                  margin-left: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 1345px) {
  .index {
    .container {
      .bannerbox {
        .navbox {
          .navcontbox {
            .navcont {
              .logobox {
                .logo {
                  margin-left: -1rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
